
<template>




<div  :style="{'height':'calc(100vh)'}" class='zpage' >
  
  <div>

<div  class="layout">

  <div class="layout" style="width: 50%;border: 1px solid rgb(218, 211, 211);padding: 4px;">
  <div  draggable="true" @dragstart="onStart($event,'9')"  class="distance" >图标</div>
  
 
  <div class="distance" draggable="true" @dragstart="onStart($event,'1')" >站台</div>
 

  

  

  <div class="distance" draggable="true" @dragstart="onStart($event,'4')" >扫码枪</div>

  <div class="distance" draggable="true" @dragstart="onStart($event,'5')" >筛选机</div>

  <div class="distance" draggable="true" @dragstart="onStart($event,'6')" >充放电</div>

  <div class="distance" draggable="true" @dragstart="onStart($event,'7')" >OCV</div>


  

 

 

  <div class="distance" draggable="true" @dragstart="onStart($event,'8')" >其他</div>

  <div class="distance" draggable="true" @dragstart="onStart($event,'2')" >堆垛机</div>

  <div class="distance" draggable="true" @dragstart="onStart($event,'10')" >文本</div>

  

</div>

  <div style="margin-left: 20px;">
    <el-input  type="number" v-model="rowHeight" class="distance"   placeholder="行高" />
   


    <el-input type="number" v-model="tempNum" class="distance"   placeholder="列数" />

    <el-button  @click="setNum()">确定</el-button>
  </div>
  





</div>
</div>
   


  <div style="overflow-x: visible;width: 8000px;">
      <grid-layout  :remove="false"  v-bind:col="colNum" v-bind:row-h="rowHeight" @dragover="onEnd" @dragenter="onEnter"
          v-model:data.sync="tags" :is-collision="false" :is-draw-grid-lines="true" gutter="0" :resize="true"
          
          
      >
        <grid-item  v-for="(tag,index) of tags" :key="tag.id" :id="tag.id">

    
      <!-- <stacker  v-if="tag.type==2" :tag="tag"> </stacker>
     



      <tagcv  v-else-if="tag.type==1" :tag="tag"></tagcv>
     

      <pic v-else-if="tag.type==9" :tag="tag" ></pic>
     
      <bcr v-else-if="tag.type==4" :tag="tag"></bcr>

      <hk v-else-if="tag.type>4 && tag.type<9" :tag="tag"></hk>

      <word v-else-if="tag.type==10" :tag="tag"></word> -->


      <Suspense>
        <template #default>
          
          <el-popover
    placement="top"
    title="操作"
    :width="200"
    trigger="click"
  >
    <template #reference v-slot>
          <component :is="componentByType(tag.type)" :tag="tag" />

        </template>

 

<div style="text-align: center;">{{ tag.code }}</div>


<div style="text-align: center;">
  <el-button @click="deleteTag(index)">删除</el-button>
  <el-button @click="copyTag(tag.id)">拷贝</el-button>
  <el-button @click="editTag(tag)">编辑</el-button>
</div>



    </el-popover>


        </template>
        <template #fallback>
          <div style="text-align: center; background-color: #F8F8F8; height: 100%;">加载中...</div>
        </template>
      </Suspense>


   

          
        
        </grid-item>
    </grid-layout>
  </div>



<el-dropdown @click="saveView" v-auth="'tagView:control'" size="large" split-button type="primary">
    保存
    <template #dropdown>
      <el-dropdown-menu>
      
      </el-dropdown-menu>
    </template>
  </el-dropdown>

 


  <el-dialog v-model="dialogVisible" title="新增点位" width="30%" draggable>
    <el-form
    
    label-width="100px"
    :model="formTag"
    style="max-width: 460px"
  >
  <el-form-item v-if="formTag.type!=9 && formTag.type!=10" label="编号">
      <el-input v-model="formTag.code" />
    </el-form-item>
    <el-form-item label="坐标x">
      <el-input-number  v-model="formTag.x" />
    </el-form-item>
    <el-form-item label="坐标y">
      <el-input-number v-model="formTag.y" />
    </el-form-item>
    <el-form-item label="长">
      <el-input-number v-model="formTag.w" />
    </el-form-item>
    <el-form-item label="高">
      <el-input-number v-model="formTag.h" />
    </el-form-item>

    <el-form-item  label="类型">
      
      <el-select v-model="formTag.type" disabled placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </el-form-item>

    <el-form-item v-if="formTag.type==1" label="叠盘标记">
      <el-select v-model="formTag.condition"  placeholder="Select">
           <el-option label="提升" value="3"></el-option>
           <el-option label="拆盘" value="2"></el-option>
           <el-option label="叠盘" value="1"></el-option>
           <el-option label="否" value=""></el-option>

        </el-select>
    </el-form-item>

   
    <el-form-item v-if="formTag.type==9"  label="图标">
								<IconSelector v-model="formTag.condition" placeholder="菜单图标" type="all" />
		</el-form-item>
    <el-form-item v-if="formTag.type==9 || formTag.type==10"  label="大小">
      <el-input-number  v-model="formTag.isCondition" />
		</el-form-item>

  

  <div v-else-if="formTag.type==2">
    <el-form-item  label="通道">
      <el-input-number  v-model="formTag.condition" />
		</el-form-item>
    <el-form-item  label="方向">
      <el-select v-model="formTag.isCondition"  placeholder="Select">
           <el-option label="左" :value="1"></el-option>
           <el-option label="右" :value="2"></el-option>
           <el-option label="双" :value="0"></el-option>
        </el-select>
		</el-form-item>

  </div>

    <el-form-item v-else-if="formTag.type==4" label="扫码方向">
      <el-select v-model="formTag.isCondition"  placeholder="Select">
           <el-option label="左" :value="0"></el-option>
           <el-option label="右" :value="1"></el-option>
           <el-option label="左上" :value="2"></el-option>
           <el-option label="右上" :value="3"></el-option>
           <el-option label="左下" :value="4"></el-option>
           <el-option label="右下" :value="5"></el-option>

           <el-option label="上" :value="6"></el-option>
           <el-option label="下" :value="7"></el-option>
        </el-select>
    </el-form-item>

    <el-form-item v-if="formTag.type==5 || formTag.type==7 || formTag.type==8 || formTag.type==6 || formTag.type==10" label="名称">
       <el-input v-model="formTag.condition"></el-input>
    </el-form-item>
   
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addTag">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

</div>


</template>
<style scoped>
.el-dropdown{
    position: absolute;
    right: 0;
}
.tool{
  margin-left: 100px;
  text-align: center;
  border: solid 1px rgb(231, 222, 222);
  left: 80px;
  
  height: 45px;
  width: 50%;
}

.layout{
  
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
}

.distance{
  
  margin: auto;
  width: 80px;
  height: 30px;
  line-height:30px;
  border: solid 1px rgb(231, 222, 222); 
  text-align: center; 
}
.distance:active{
  border: solid 2px red;
}
.distance:focus{
  border: solid 2px red;
}


.zpage {
	overflow: auto;
}
</style>
<script lang="ts" setup>
import { VueElement, ref ,reactive,defineAsyncComponent} from "vue";
import { useRoute } from 'vue-router';
import { ElMessage,ElLoading  } from 'element-plus'
// import tagcv from '/@/views/main/tagView/component/tagcv.vue'
// import word from '/@/views/main/tagView/component/word.vue'
// import bcr from '/@/views/main/tagView/component/bcr.vue'
// import hk from '/@/views/main/tagView/component/hk.vue'
// import stacker from '/@/views/main/tagView/component/stacker.vue'
// import pic from '/@/views/main/tagView/component/picture.vue'


const tagcv = defineAsyncComponent(() => import('/@/views/main/tagView/component/tagcv.vue'));
const word = defineAsyncComponent(() => import('/@/views/main/tagView/component/word.vue'));
const bcr = defineAsyncComponent(() => import('/@/views/main/tagView/component/bcr.vue'));
const hk = defineAsyncComponent(() => import('/@/views/main/tagView/component/hk.vue'));
const stacker = defineAsyncComponent(() => import('/@/views/main/tagView/component/stacker.vue'));
const pic = defineAsyncComponent(() => import('/@/views/main/tagView/component/picture.vue'));

import { addTags,getTags } from '/@/api/main/mainView';
import { v1 as uuid } from 'uuid';  


import { GridLayout, GridItem} from 'vue3-draggable-grid'
import 'vue3-draggable-grid/dist/style.css'
import IconSelector from '/@/components/iconSelector/index.vue';

const isEdit=ref(false);

const rowHeight = ref(25);

const colNum = ref(300);

const tempNum=ref(300);

const options = [
  {
    value: 1,
    label: '站台',
  },
  {
    value: 2,
    label: '堆垛机',
  },
  {
    value: 4,
    label: '扫码枪',
  },
  {
    value: 5,
    label: '筛选机',
  },
  {
    value: 6,
    label: '充放电',
  },
  {
    value: 7,
    label: 'OCV',
  },
  {
    value: 8,
    label: '其它',
  },
  {
    value: 9,
    label: '图标',
  },
  {
    value: 10,
    label: '文本',

  }
]
  
  

const route = useRoute();
const dialogVisible = ref(false)
const data=ref({
  id:0,
  tags:ref<any>([]),
  rowHeight:30,
  colNum:300

})
const formTag = reactive({
  x: 0,
  y: 0,
  w: 1,
  h: 1,
  id: uuid(),
  code:'10001',
  type:1,
  condition:'',
  isCondition:0,
  isNew:false
})



const tags = ref([
  { x: 0, y: 1, w: 1, h: 1, id: uuid(),type:1,code:'1123',condition:'',isCondition:0,isNew:false },
  { x: 1, y: 1, w: 1, h: 1, id: uuid(),type:1,code:'1124',condition:'',isCondition:0,isNew:false },
  

]);

const deleteTag=(index:number)=>{
   tags.value.splice(index,1);
};



const componentByType = (type:number) => {
  // 定义一个对象，用于映射类型到组件
  const componentMap = {
    1: tagcv,
    2:stacker,
    3:hk,
    4:bcr,
    5:hk,
    6:hk,
    7:hk,
    8:hk,
    9:pic,
    10:word,
    
  };

  

 

  // 返回映射中对应的组件，如果没有找到则返回一个默认组件
  return componentMap[type] || word;
};




const setNum=()=>{
  if(tempNum){
    colNum.value=tempNum.value;
  }

}


const showDialog=(type:number)=>{

  
  formTag.id=uuid();
  formTag.type=type;
  if(type==2){
    formTag.h=4;
    formTag.w=3;
  }  else if(type==4){
    formTag.h=2;

  } else if(type==5){
    formTag.condition='SEL';
  } else if(type==7){
    formTag.condition='OCV';
  } else if(type==6){
    formTag.condition='FMT';
  } else if(type==9 || type==10){
    formTag.code='';
    formTag.isCondition=15;
  }

  else formTag.h=1;

  isEdit.value=false;
  dialogVisible.value=true;


};

const showEditDialog=(tag:any)=>{

  


isEdit.value=true;
dialogVisible.value=true;


};

// 拷贝
const copyTag=(id:string)=>{
 
  let result= tags.value.filter(x=>x.id==id);
  if(result && result.length>0){
    let tag=result[0];
    formTag.x=tag.x;
    formTag.y=tag.y;
    formTag.w=tag.w;
    formTag.h=tag.h;
    formTag.id=uuid();
    formTag.code=tag.code;
    formTag.type=tag.type;
    formTag.condition=tag.condition;
    formTag.isCondition=tag.isCondition;
    showDialog(tag.type);
  }
  
};
// 编辑
const editTag=(tag:any)=>{
 
   formTag.id=tag.id;
   formTag.x=tag.x;
   formTag.y=tag.y;
   formTag.w=tag.w;
   formTag.h=tag.h;
   
   formTag.code=tag.code;
   formTag.type=tag.type;
   formTag.condition=tag.condition;
   formTag.isCondition=tag.isCondition;
   showEditDialog(tag);
 };
 
// 添加
const addTag=()=>{
  
  
   let result= tags.value.filter(x=>x.id==formTag.id);



   if(result.length>0){

 
   result[0].x=formTag.x;
   result[0].y=formTag.y;
   result[0].w=formTag.w;
   result[0].h=formTag.h;
   
   result[0].code=formTag.code;
   result[0].type=formTag.type;
   result[0].condition=formTag.condition;
   result[0].isCondition=formTag.isCondition;
     
   }
   else
   tags.value.push({x:formTag.x,y:formTag.y,w:formTag.w,h:formTag.h,id:formTag.id,type:formTag.type,condition:formTag.condition,isCondition:formTag.isCondition,code:formTag.code,isNew:true});
   dialogVisible.value=false;
}

// 保存视图
const saveView=async()=>{

  if(route.query.name){

    data.value.id=+route.query.name;
    data.value.tags=tags.value;

    data.value.colNum=colNum.value;
    data.value.rowHeight=rowHeight.value;

    const loading = ElLoading.service({ fullscreen: true })

    await addTags(data.value);

    loading.close();
    
	  
	
	
  }
  else{

    ElMessage.error('无法保存，没有关联的视图');
  }

}



const handleQuery=async()=>{
  
  if(route.query.name){
 let res=await getTags({id:route.query.name});

 if(res.data.result && res.data.result.tags.length>0){
 tags.value= res.data.result.tags;
   rowHeight.value=res.data.result.rowHeight;
   colNum.value=res.data.result.colNum;
   tempNum.value=colNum.value;
  
  
 }
}
else{
  tags.value=[
  { x: 0, y: 1, w: 1, h: 1, id: uuid(),type:1,code:'1123',condition:'',isCondition:0,isNew:false },
  { x: 1, y: 1, w: 1, h: 1, id: uuid(),type:1,code:'1124',condition:'',isCondition:0,isNew:false },
  
];
rowHeight.value=20;
colNum.value=80;
}

}
const onEnter=(event: DragEvent)=> {
 
  event.preventDefault()
}
const onEnd=(event: DragEvent)=> {
  if(event.dataTransfer){

    let data = event.dataTransfer.types[0];
  let type=data.replace(`text/`,'');
 
  
    showDialog(+type);
  }
  
  
  
}

const onStart=(event: DragEvent,type:string)=> {
 
  event.dataTransfer?.setData(`text/${type}`,'');
  
}


handleQuery();

 




</script>
